<template>
   <div class="form-container" style="margin:0 0 12px 0" >
      <el-card>
     <el-row :gutter="12" class="search-row">
      <el-form :inline="true" :model="formInline" ref="formRef"  label-position="right" class="demo-form-inline flex flex-wrap gap-4">
        <el-form-item label="地市:" prop="city" class="form-item">
      <el-select v-model="city" placeholder="请选择地市" class="filter-item">
          <el-option  v-for="item in citylist" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </el-form-item>
    <el-form-item label="供电所:" prop="powerSupplyStation" class="form-item">
      <el-select v-model="powerSupplyStation" placeholder="请选择供电所" class="filter-item">
          <el-option  v-for="item in citylist" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </el-form-item>
        <el-form-item label="诉求时间:" prop="appealTime" class="form-item">
        <el-date-picker
        v-model="appealTime"
        type="datetimerange"
        format="YYYY-MM-DD "
        date-format="YYYY/MM/DD "
        class="filter-item"
      />
    </el-form-item>
        <el-form-item  class="form-item"  >
        <el-button type="primary" @click="getData">查 询</el-button>
        <el-button    @click="reset">重置</el-button>
        </el-form-item>
        </el-form>
</el-row>  
</el-card>
</div>
  <el-card>
    <div class="table_heard" style="display: flex;justify-content: space-between;"> 
      <div class="heard_left" style="display: inline-block;">
      <span>数据明细</span>
    </div> 
    <div class="heard_right" style="display: flex;justify-content: flex-end;">
        <el-button type="primary" @click="removeallClick">
        删除
        </el-button>
        <el-button type="primary" @click="onImportExcelClick">
          导入数据
        </el-button>
        </div>
    </div>
    <el-table :data="tableData"
              border
              v-loading="dataLoading"
              style="width: 100%;margin-bottom: 20px;margin-top: 20px;height: 70vh">
      <el-table-column prop="city" label="地市">
      </el-table-column>
      <el-table-column prop="districtCounty" label="区县局"  align="center" min-width="160px">
      </el-table-column>
      <el-table-column prop="powerSupplyStation" label="供电所"  align="center" min-width="100px">
      </el-table-column>
      <el-table-column prop="responsibleDepartment"  label="归口部门"  align="center" min-width="120px">
      </el-table-column>
      <el-table-column prop="initialWorkOrderType"  label="工单类型（受理时"  align="center" min-width="160px">
      </el-table-column>
      <el-table-column prop="finalWorkOrderType" label="工单类型（终定"  align="center" min-width="160px">
      </el-table-column>
      <el-table-column prop="energyBureauFirstLevelCategory"  label="能监局一级分类"  align="center" min-width="160px">
      </el-table-column>
      <el-table-column prop="energyBureauSecondLevelCategory"  label="能监局二级分类"  align="center" min-width="160px">
      </el-table-column>
      <el-table-column prop="secondLevelCategory" label="二级分类" min-width="90px"  align="center">
      </el-table-column>
      <el-table-column prop="thirdLevelCategory" label="三级分类" min-width="100px"  align="center">
      </el-table-column>
      <el-table-column prop="fourthLevelCategory"  label="四级分类" min-width="100px"  align="center">
      </el-table-column>
      <el-table-column prop="associatedMarketingSystemTicket"  label="关联营销系统工单"  align="center" min-width="160px">
      </el-table-column>
      <el-table-column prop="workOrderStatus"  label="工单状态" min-width="110px"  align="center">
      </el-table-column>
      <el-table-column prop="marketingSystemTicketCompletionTime"  label="营销系统工单办结时间"  align="center" min-width="180px">
      </el-table-column>
      <el-table-column prop="marketingSystemTicketCreationTime"  label="营销系统起单时间" min-width="180px"  align="center">
      </el-table-column>
      <el-table-column prop="cityBureauResponseTime"  label="地市局回复报告时间（5个工作日答复）" min-width="280px"  align="center">
      </el-table-column>
      <el-table-column prop="customerServiceCenterSubmitTime"  label="客服中心递交省公司时间（不超3个工作日）" min-width="300px"  align="center">
      </el-table-column>
      <el-table-column prop="provincialCompanySealTime"  label="省公司盖章时间" min-width="140px"  align="center">
      </el-table-column>
      <el-table-column prop="customerServiceCenterResponseTime"  label="客服中心答复能源局时间" min-width="180px"  align="center">
      </el-table-column>
      <el-table-column prop="responseDeadline"  label="答复能源局时限（10个工作日内）" min-width="260px"  align="center">
      </el-table-column>
      <el-table-column prop="complaintDate"  label="申诉日期" min-width="100px"  align="center">
      </el-table-column>
      <el-table-column prop="isComplaintAccepted"  label="申诉是否受理" min-width="120px"  align="center">
      </el-table-column>
      <el-table-column prop="isResponsible"  label="申诉是否有责" min-width="160px"  align="center">
      </el-table-column>
    </el-table>
    <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total"
    />
  </el-card>
  <el-dialog v-model="UploadExcelDialogShow" title="上传数据" width="20%">
    <el-upload
        class="upload-demo"
        multiple
        method="post"
        :action="uploadAction"
        style="margin-left: 10px"
        accept=".xlsx,.xls"
        :show-file-list="false"
        :on-success="handleSuccess"
        :before-upload="beforeUploadHandle"
        name="files"
    >
      <el-button style="margin-left: 100px;" type="primary" :loading="importLoading">导入</el-button>
    </el-upload>
  </el-dialog>
  <el-dialog v-model="Deletenotice" title="提示" width=40%>
    是否要删除？
     <template #footer>
    <div class="dialog-footer" >
        <el-button @click="Deletenotice = false">取消</el-button>
        <el-button type="primary" @click="ConfirmremoveallClick">
          确认
        </el-button>
      </div>
    </template></el-dialog>
</template>
<script setup>

import { ref,computed } from 'vue'
import utils from "@/utils/utils";
import {getComplaint,getdeleteAll} from "@/api/work-order";

const city = ref('')
const powerSupplyStation = ref('')
const appealTime = ref('')
const UploadExcelDialogShow = ref(false)
const tableData = ref([])
const dataLoading = ref(false)
const total = ref(0)
const page = ref(1)
const size = ref(10)
const importLoading = ref(false)
import { ElMessage } from 'element-plus'
const apiBaseUrl=import.meta.env.VITE_API_URL
const uploadAction = computed(() => `${apiBaseUrl}/import/complaint`);
const Deletenotice=ref(false)
const citylist = ref([
  { value: '业务办理', label: '业务办理' },
])
const getData = async () => {
  dataLoading.value = true
  const result = await getComplaint({
    page: page.value,
    size: size.value
  })
  tableData.value = result.list
  total.value = result.total
  dataLoading.value = false
}

getData()
const onImportExcelClick = () => {
  UploadExcelDialogShow.value = true
}

const beforeUploadHandle = (file) => {
  importLoading.value = true // 开启按钮 loading
  return true
}

const handleSuccess = async (res) => {
  console.log(res);
  utils.showSuccess('上传数据成功')
  await getData()
  UploadExcelDialogShow.value = false
  importLoading.value = false
  // utils.hideLoadding()
}

const removeallClick=()=>{
  Deletenotice.value=true
}
const ConfirmremoveallClick = async()=> {
  let result =await getdeleteAll()
  console.log(result);
  if(result){
    ElMessage({
    message: '删除成功',
    type: 'success',
    plain: true,
    })
    getData()
  }
  Deletenotice.value=false
  // getdeleteAll().then((res)=>{
  // console.log(res);
  // })
  
}
/**
 * size 改变触发
 */
const handleSizeChange = async currentSize => {
  size.value = currentSize
  await getData()
}

/**
 * 页码改变触发
 */
const handleCurrentChange = async currentPage => {
  page.value = currentPage
  await getData()
}

</script>

<style lang="scss" scoped >
.demo-form-inline {
  display: flex;
  flex-wrap: nowrap;
  .form-item{
    // min-width: 200px;
      flex-grow: 1;
    // flex-basis: 0;
  }
}

/* 响应式布局 */
// @media (min-width: 640px) {
//   .demo-form-inline .w-full {
//     width: 50%;
//   }
// }

@media (min-width: 768px) {
  .demo-form-inline .form-item {
    width: 33.333%;
  }
}

@media (min-width: 1024px) {
  .demo-form-inline .form-item {
    width: 25%;
  }
 
}

.filter-item{
  min-width: 120px;
}

.search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: -16px;
}

.right-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>